<template>
    <div class="invoicesDetails">
      <el-row>
        <el-form :model="requestParam"
                 label-width="100px">
          <el-col :span="6">
            <el-button @click="Return">返回</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-form :model="requestParam"
                 label-width="100px">
          <el-col :span="6">
            <el-form-item label="项目名称">
              <div class="content">{{requestParam.EP_GLXMLX}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据编号">
              <div class="content">{{requestParam.Code}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算日期">
              <div class="content">{{requestParam.BizDate}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经办人">
              <div class="content">{{requestParam.JBR}}</div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-form :model="requestParam"
                 label-width="100px">
          <el-col :span="6">
            <el-form-item label="结算方式">
              <div class="content">{{requestParam.JSFS}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同名称">
              <div class="content">{{requestParam.HTName}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同编码">
              <div class="content">{{requestParam.HTCode}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="含税结算金额">
              <div class="content">{{requestParam.JSJE}}</div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-form :model="requestParam"
                 label-width="100px">
          <el-col :span="6">
            <el-form-item label="计成本金额">
              <div class="content">{{requestParam.JCBJE}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="税率">
              <div class="content">{{requestParam.TaxRatio}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同金额">
              <div class="content">{{requestParam.HTJE}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="累计结算金额">
              <div class="content">{{requestParam.LJJSJE}}</div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-form :model="requestParam"
                 label-width="100px">
          <el-col :span="6">
            <el-form-item label="累计履约金额">
              <div class="content">{{requestParam.LJLYJE}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="编制人">
              <div class="content">{{requestParam.CreatorName}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="编制日期">
              <div class="content">{{requestParam.CreateTime}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="编制机构">
              <div class="content">{{requestParam.DeptName}}</div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-table :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }"
                :data="tableData.list">
        <el-table-column prop="project_no"
                         label="序号"
                         align="center"
                         type="index"
                         width="100px"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="CL_FullCode"
                         label="材料编码"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="CL_Name"
                         label="材料名称"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="CL_GG"
                         label="规格"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="CL_XH"
                         label="型号"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="CaiZhi"
                         label="材质"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DW"
                         label="计量单位"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="RKSL"
                         label="入库数量"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="HSRKDJ"
                         label="含税入库单价"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="HSJSDJ"
                         label="含税结算单价"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handlePageChange"
                     @size-change="handleSizeChange"
                     :current-page="requestParam.page"
                     :page-size="requestParam.page_size"
                     layout="total,sizes,prev, pager, next, jumper"
                     background
                     :total="tableData.total_count"
                     align="center">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { BulkManageApi } from "@/services/ResourceCentre";
  export default {
    components: {
  
    },
    data () {
      return {
        requestParam: {
          EP_GLXMLX:'',
          Code:'',
          BizDate:'',
          JBR:'',
          JSFS:'',
          HTName:'',
          HTCode:'',
          JSJE:'',
          JCBJE:'',
          TaxRatio:'',
          HTJE:'',
          LJJSJE:'',
          LJLYJE:'',
          CreatorName:'',
          CreateTime:'',
          DeptName:'',
          is_page:1,
          page: 1,
          page_size: 10,
          master_bill_id:'',
        },
        tableData: {
          list: [],
          page: 1,
          total_count: 0
        }
      };
    },
    methods: {
      handlePageChange (page) {
        this.requestParam.page = page
        this.getData()
      },
      // 每页数量
      handleSizeChange(page_size){
        this.requestParam.page_size=page_size;
        this.getData()
      },
      getData () {
        BulkManageApi.getInvoicesListDetails({
          params:{
            master_bill_id:this.requestParam.master_bill_id
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.data;
            this.requestParam=res.data.main_data
            console.log(this.tableData);
          }
        })
      },
      Return(){
        window.history.back()
      }
    },
    created () {
  
    },
    mounted () {
      this.requestParam=this.$route.params.requestParam
      this.getData()
    },
  };
  </script>
  
  <style scoped lang="scss">
        .invoicesDetails{
          width: 100%;
          padding: 20px;
        }
        .content{
          // border: 1px solid black;
          height: 40px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow:ellipsis;
        }
  </style>
  